<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="jp">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Queued Photo Uploader - Standalone Showcase from digitarald.de</title>

	<meta name="author" content="Harald Kirschner, digitarald.de" />
	<meta name="copyright" content="Copyright 2009 Harald Kirschner" />

	<script type="text/javascript" src="js/jquery/jquery.js"></script>
	<script type="text/javascript" src="source/FancyUpload-jQuery.js"></script>
	<script type="text/javascript" src="source/upload.js"></script>


	<!-- See style.css -->
	<style type="text/css">
		/**
 * FancyUpload Showcase
 *
 * @license		MIT License
 * @author		Harald Kirschner <mail [at] digitarald [dot] de>
 * @copyright	Authors
 */

/* CSS vs. Adblock tabs */
.swiff-uploader-box a {
	display: none !important;
}

/* .hover simulates the flash interactions */
a:hover, a.hover {
	color: red;
}

#demo #status {
	padding: 10px 15px;
	width: 420px;
	border: 1px solid #eee;
}

#demo #status .progress {
	background: url(assets/progress-bar/progress.gif) no-repeat;
	background-position: +50% 0;
	margin-right: 0.5em;
	vertical-align: middle;
}

#demo #status .progress-text {
	font-size: 0.9em;
	font-weight: bold;
}

#demo #list {
	list-style: none;
	width: 450px;
	margin: 0;
}

#demo #list li.validation-error {
	padding-left: 44px;
	display: block;
	clear: left;
	line-height: 40px;
	color: #8a1f11;
	cursor: pointer;
	border-bottom: 1px solid #fbc2c4;
	background: #fbe3e4 url(assets/failed.png) no-repeat 4px 4px;
}

#demo #list li.file {
	border-bottom: 1px solid #eee;
	background: url(assets/file.png) no-repeat 4px 4px;
	overflow: auto;
}
#demo #list li.file.file-uploading {
	background-image: url(assets/uploading.png);
	background-color: #D9DDE9;
}
#demo #list li.file.file-success {
	background-image: url(assets/success.png);
}
#demo #list li.file.file-failed {
	background-image: url(assets/failed.png);
}

#demo #list li.file .file-name {
	font-size: 1.2em;
	margin-left: 44px;
	display: block;
	clear: left;
	line-height: 40px;
	height: 40px;
	font-weight: bold;
}
#demo #list li.file .file-size {
	font-size: 0.9em;
	line-height: 18px;
	float: right;
	margin-top: 2px;
	margin-right: 6px;
}
#demo #list li.file .file-info {
	display: block;
	margin-left: 44px;
	font-size: 0.9em;
	line-height: 20px;
	clear : both;
}
#demo #list li.file .file-remove {
	clear: right;
	float: right;
	line-height: 18px;
	margin-right: 6px;
}	</style>


</head>
<body>

	<div class="container">

		<h1><a href="http://digitarald.de/project/fancyupload/">FancyUpload</a> Standalone Showcase from <a href="http://digitarald.de/">digitarald.de</a></h1>

		<h2>Queued Photo Uploader</h2>



		<!-- See index.html -->
		<div id="demo">
			<form action="script.php" method="post" enctype="multipart/form-data" id="form-demo">

	<fieldset id="fallback">
		<legend>File Upload</legend>
		<p>
			This form is just an example fallback for the unobtrusive behaviour of FancyUpload.
			If this part is not changed, something must be wrong with your code.
		</p>
		<label for="demo-photoupload">
			Upload a Photo:
			<input type="file" name="Filedata" />
		</label>
	</fieldset>

	<div id="status" class="hide">
		<p>
			<a href="#" id="browse">Browse Files</a> |
			<a href="#" id="clear">Clear List</a> |
			<a href="#" id="upload">Start Upload</a>
		</p>
		<div>
			<strong class="overall-title"> </strong><br />
			<img src="./assets/progress-bar/bar.gif" class="progress overall-progress" alt="" />
		</div>
		<div>
			<strong class="current-title"> </strong><br />
			<img src="./assets/progress-bar/bar.gif" class="progress current-progress" alt="" />
		</div>
		<div class="current-text">&nbsp;</div>
	</div>

	<ul id="list"></ul>

</form>		</div>


	</div>

	<div class="container quiet" style="line-height: 5em;">
		© 2008-2009 by <a href="http://digitarald.de/">Harald Kirschner</a> and available under <a href="http://www.opensource.org/licenses/mit-license.php">The MIT License</a>
	</div>

</body>
</html>
